<template>
  <span>{{ formattedDate }}</span>
</template>

<script setup>
import { computed } from 'vue';
import { useDateFormat } from '@vueuse/core';

// 1. 使用 defineModel 替代 defineProps 来处理 v-model
// 这会自动创建一个名为 'modelValue' 的 prop，并能在值变化时发出 'update:modelValue' 事件
const modelValue = defineModel({
  type: [String, Number, Date, Array, null],
  required: true,
});

// 2. 定义其他辅助性的 props
const props = defineProps({
  // 格式化字符串
  format: {
    type: String,
    default: 'YYYY年MM月DD日',
  },
  // 日期类型：单个日期或日期范围
  type: {
    type: String,
    default: 'date', // 'date' 或 'daterange'
    validator: (value) => ['date', 'daterange'].includes(value),
  },
  // 日期范围的分隔符
  separator: {
    type: String,
    default: ' ~ ',
  },
});

// 3. 计算属性的逻辑保持不变，但现在它依赖于 modelValue
const formattedDate = computed(() => {
  // 如果 modelValue 为空或无效，直接返回空字符串
  if (!modelValue.value) {
    return '';
  }

  // 根据 type 处理不同的情况
  if (props.type === 'daterange') {
    // 处理日期范围
    if (Array.isArray(modelValue.value) && modelValue.value.length === 2) {
      // 确保数组内的元素也有值
      if (!modelValue.value[0] || !modelValue.value[1]) return '';
      const startDate = useDateFormat(modelValue.value[0], props.format).value;
      const endDate = useDateFormat(modelValue.value[1], props.format).value;
      return `${startDate}${props.separator}${endDate}`;
    }
    // 如果数据格式不正确，返回空字符串或错误提示
    return '日期范围格式错误';
  } else {
    // 处理单个日期
    return useDateFormat(modelValue.value, props.format).value;
  }
});
</script>

<style scoped>
span {
  color: #606266; /* 示例样式 */
}
</style>
